<div class="row RowSpace" style="display:flex;margin-bottom:20px;">
    <div style="display:flex;width:60%;">
        <Label IsEmpty="false">设备类型</Label>
        <div class="InputDiv">
            <DropDownList value="TerminalType" IsEmpty="false" change="onTerminalTypeChange()" enum="TerminalTypeEnum"></DropDownList>
        </div>
        <Label style='margin-left:20px;'>部门</Label>
        <div class="InputDiv" style="width:150px;">
            <Refer EntityName="Department" WindowTitle="部门" value="Department" change="onDepartmentChange(records)">
                <RColumn type="0" width="150px" displayname="编码" valuefield="Code"></RColumn>
                <RColumn type="textbox" width="150px" displayname="名称" valuefield="Name"></RColumn>
                <RColumn width="286px" displayname="备注" valuefield="Remark"></RColumn>
            </Refer>
        </div>
    </div>
    <div style="display:flex;justify-content:flex-end;align-items:center;width:40%;">
        <Label style="margin-left:20px;margin-right:5px;padding-top:5px;">连接异常</Label>
        <div style="width:18px; height:18px;background-color:{{ConnectColor}};"/>
        <Label style="margin-left:20px;margin-right:5px;padding-top:5px;">解析异常</Label>
        <div style="width:18px; height:18px;background-color:{{AnalyzeColor}};"/>
        <Label style="margin-left:20px;margin-right:5px;padding-top:5px;">运行正常</Label>
        <div style="width:18px; height:18px;background-color:{{NormalColor}};"/>
    </div>
</div>

<div class="row RowSpace LastRow">
    <div class="TerminalsDiv">
        <div class="TerminalDiv" ng-repeat="stRecord in DisplayRecords" ng-click="terminalClick(stRecord)" style="{{stRecord == FocusedRecord ? 'background-color: #EEFFEE;' : ''}}">
            <div class="TerminalTitleDiv" style="background-color: {{stRecord.Terminal._Color}};">
                <img class="TerminalImg" ng-src="modules/CBO/client/Images/{{stRecord.Terminal._Img}}" ng-click="terminalClick(stRecord)"/>
                <div style="padding-left:10px;">{{stRecord.Terminal.Name}}</div>
                <div ng-if="stRecord.Terminal._Color == AnalyzeColor" class="glyphicon glyphicon-search TerminalLookException" ng-click="btnLookException(stRecord)"/>
            </div>
            <div class="TerminalFontDiv" title="{{stRecord.Terminal.UniqueID}}">
                唯一标识: {{stRecord.Terminal.UniqueID}}
            </div>
            <div class="TerminalFontDiv" title="{{stRecord.WorkLocation.Name}}">
                部署工位: {{stRecord.WorkLocation.Name}}
            </div>
            <div class="TerminalFontDiv" title="{{stRecord.Terminal._Work.Name}}">
                采集作业: {{stRecord.Terminal._Work.Name}}
            </div>
            <div ng-show="stRecord.Terminal._LastRequestDate" class="TerminalFontDiv" title="{{stRecord.Terminal._LastRequestDate}}">
                请求日期: {{stRecord.Terminal._LastRequestDate.split(' ')[0]}}
            </div>
            <div ng-show="stRecord.Terminal._LastRequestDate" class="TerminalFontDiv" title="{{stRecord.Terminal._LastRequestDate}}">
                请求时间: {{stRecord.Terminal._LastRequestDate.split(' ')[1]}}
            </div>
        </div>
    </div>
</div>


<ModalBox id="lookException" Visible= "false" Text="异常明细" WindowTitle='设备异常明细' IsDisplayBtn="false">
  <div class="row RowSpace">
    <DataGrid id="DataGrid1" module="Module.DeviceMonitor" IsEdit="false" IsAutoLoad="false"  height="503px">
        <Column Type="TextBox" DisplayName="终端名称" width="80px" ValueField="TerminalName" IsOrder="false"></Column>
        <Column Type="DropDownList" DisplayName="执行结果" width="70px" ValueField="ExecuteResult" Enum="ExecuteResultEnum"></Column>
        <Column Type="Calendar" DisplayName="扫描时间" width="140px" ValueField="ScanTime"></Column>
        <Column Type="Calendar" DisplayName="请求时间" width="140px" ValueField="RequestTime"></Column>
        <Column Type="Calendar" DisplayName="完成时间" width="140px" ValueField="EndTime"></Column>
        <Column Type="TextBox" DisplayName="异常信息" width="200px" ValueField="ExceptionInfo"></Column>
    </DataGrid>
  </div>
</ModalBox>

<style type="text/css">
.TerminalsDiv{
    overflow:auto;
    overflow-x:hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;

    /*border-right: outset #FFF 1px;
    border-bottom: outset #FFF 1px;
    border-top: solid #DDD 1px;
    border-left: solid #DDD 1px;*/
}
.TerminalDiv{
    width: 194px;
    height: 156px;
    border: solid 1px #9C9C9C;
    display: flex;
    flex-direction: column;
    background-color: #FFF;
    padding-bottom: 5px;
    cursor: default;
    margin: 0px 20px 20px 0px;
}
.TerminalTitleDiv{
    color: #FFF;
    display: flex;
    width:100%;
    align-items: center;
    height: 38px;
    position: relative;
    padding-left: 10px;
}
.TerminalFontDiv{
    width: 100%;
    height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;          /*超过宽度,结束位置显示"..."*/
    white-space: nowrap;              /*强制在同一行内显示所有文本*/
    font-size: 13px;
    padding: 5px 10px 0px 10px;
}
.TerminalImg{
    height: 26px;
}
.TerminalLookException{
    cursor: pointer;
    color: #FFF;
    position: absolute;
    right:0px;
    padding: 11px 5px 0px 0px;    
}
</style>